<template>
  <div class="swiper-container">
    <el-carousel height="260px">
      <el-carousel-item v-for="(item, index) in imgs" :key="index">
        <nuxt-link to="#">
          <img :src="item.url" alt="item.title">
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>
    <div>
      <span>天猫</span>
    </div>
    <el-carousel height="190px">
      <el-carousel-item v-for="(item, index) in imgs_btm" :key="index">
        <nuxt-link to="#">
          <img :src="item.url" alt="item.title" class="imgs">
          <img :src="item.url" alt="item.title" class="imgs">
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgs: [
        {
          title: '今日特价',
          url: 'imgs/img1.jpg'
        }, {
          title: '每日特惠',
          url: 'imgs/img2.jpg'
        }, {
          title: '爆款推荐',
          url: 'imgs/img3.jpg'
        }, {
          title: '超值特享',
          url: 'imgs/img4.jpg'
        }, {
          title: '飞逸家具',
          url: 'imgs/img5.jpg'
        }
      ],
      imgs_btm: [
        {
          title: '2019年10月日常投放1_能率官方旗舰店',
          url: 'imgs/sb1.jpg'
        }, {
          title: '2019年10月日常投放1_能率官方旗舰店',
          url: 'imgs/sb2.jpg'
        }, {
          title: '2019年10月日常投放1_能率官方旗舰店',
          url: 'imgs/sb3.jpg'
        }
      ]
    }
  }

}
</script>

<style lang="stylus" scoped>
.swiper-container >>> .el-carousel__arrow
  background rgba(4,29,73,.5)
  font-size 16px
.swiper-container
  margin 0 10px
  img
    height 100%
    width 100%
  .imgs
    height 100%
    padding 1px
    width 49%
</style>
